<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>OpenLayers v8.2.0 API - Class: ImageTile</title>
  <script src="scripts/prettify/prettify.js"></script>
  <script src="scripts/prettify/lang-css.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
  <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
  <link rel="stylesheet" type="text/css" href="styles/carbon.css">
  <link rel="stylesheet" type="text/css" href="/theme/ol.css">
  <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
  <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
    <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
        alt="">&nbsp;OpenLayers</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
      aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- menu items that get hidden below 768px width -->
    <nav class="collapse navbar-collapse" id="olmenu">
      <ul class="nav navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Docs</a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
            <a class="dropdown-item" href="/doc/">Docs</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
            <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>常见问题</a>
            <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>教程</a>

          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-sitemap me-1"></i>API
          </a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
            <a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
              (latest)</a </div>
        </li>
      </ul>
    </nav>
  </header>

  <div class="container-fluid">
    <div id="wrap" class="row">
      <div class="navigation col-md-4 col-lg-3">
        <div class="search-wrapper">
          <div class="search">
            <input id="search" type="text" autocomplete="off" class="form-control input-sm"
              placeholder="Search Documentation">
          </div>
        </div>
        <div class="navigation-list-wrapper">
          <ul class="navigation-list search-empty">
            <li class="item item-class toggle-manual toggle-manual-show" data-longname="module:ol/ImageTile~ImageTile"
              data-name="ol/imagetile">
              <span class="title toggle">
                <span class="fa fa-chevron-right me-2 mt-1"></span>
                <span><a href="module-ol_ImageTile-ImageTile.html">ol​/ImageTile</a></span>
              </span>
              <div class="member-list" data-type="methods">
                <span class="subtitle">Methods</span>
                <ul>
                  <li data-name="dispatchevent"><a
                      href="module-ol_ImageTile-ImageTile.html#dispatchEvent">dispatchEvent</a>
                  <li data-name="getimage"><a href="module-ol_ImageTile-ImageTile.html#getImage">getImage</a>
                  <li data-name="gettilecoord"><a
                      href="module-ol_ImageTile-ImageTile.html#getTileCoord">getTileCoord</a>
                  <li data-name="load"><a href="module-ol_ImageTile-ImageTile.html#load">load</a>
                  <li data-name="setstate"><a href="module-ol_ImageTile-ImageTile.html#setState">setState</a>
                </ul>
              </div>
            <li class="loading">Loading …
          </ul>
        </div>
      </div>

      <div class="main col-md-8 col-lg-9">
        <h1 class="page-title" data-filename="module-ol_ImageTile-ImageTile.html">Class: ImageTile</h1>
        <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
          <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
            aria-label="Close"></button>
          This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a id="latest-link"
            href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
        </div>




        <section class="content">

          <header>
            <h2 class="my-3">
              <span class="ancestors"><a href="module-ol_ImageTile.html">ol/ImageTile</a>~</span>ImageTile
            </h2>
            <br>

            <!-- <div class="row p-3 ">
              <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                <script async type="text/javascript"
                  src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                  id="_carbonads_js"></script>
              </div>

            </div> -->
          </header>

          <article>
            <div class="container-overview">



              <dl>

                <dt class="">


                </dt>
                <dd class="">












                  <dl class="details">





















                  </dl>













                </dd>

              </dl>

            </div>




            <h3 class="subsection-title">Extends</h3>

            <ul>
              <li><a href="module-ol_Tile-Tile.html">Tile</a></li>
            </ul>















            <h3 class="subsection-title">Methods</h3>

            <dl>


              <dt class="">

                <div class="nameContainer inherited">
                  <div class="anchor" id="dispatchEvent">
                  </div>
                  <h4 class="name">
                    dispatchEvent<span class="signature">(event)</span><span
                      class="fa fa-arrow-circle-right"></span><span class="type-signature returnType">{boolean |
                      undefined}</span>

                    <span class="inherited"><a
                        href="module-ol_events_Target-Target.html#dispatchEvent">inherited</a></span>



                  </h4>

                  <div class="tag-source">
                    <a
                      href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/events/Target.js">events/Target.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/events/Target.js#L85">line
                      85</a>
                  </div>

                </div>


              </dt>
              <dd class="">




                <div class="description">
                  <p>分派一个事件并调用所有正在监听此类型事件的侦听器。事件参数可以是字符串或具有<code>type</code> 属性的对象。</p>
                </div>










                <table class="params">
                  <thead>
                    <tr>

                      <th>Name</th>


                      <th>Type</th>

                      <th class="last">Description</th>
                    </tr>
                  </thead>

                  <tbody>


                    <tr class="">

                      <td class="name"><code>event</code></td>



                      <td class="type">


                        <span class="param-type"><a href="module-ol_events_Event-BaseEvent.html">BaseEvent</a></span>
                        |

                        <span class="param-type">string</span>




                      </td>



                      <td class="description last">

                        <p>Event object.</p>
                      </td>
                    </tr>


                  </tbody>
                </table>




                <dl class="details">





















                </dl>















                <h5>Returns:</h5>
                如果任何人在事件对象上调用preventDefault，或者如果任何侦听器返回false，则为<code>false</code>。
                <br />




              </dd>




              <dt class="">

                <div class="nameContainer">
                  <div class="anchor" id="getImage">
                  </div>
                  <h4 class="name">
                    getImage<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span
                      class="type-signature returnType">{HTMLCanvasElement | HTMLImageElement | HTMLVideoElement}</span>



                  </h4>

                  <div class="tag-source">
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/ImageTile.js">ImageTile.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/ImageTile.js#L64">line 64</a>
                  </div>

                </div>


              </dt>
              <dd class="">




                <div class="description">
                  <p>Get the HTML image element for this tile (may be a Canvas, Image, or Video).</p>
                </div>











                <dl class="details">





















                </dl>















                <h5>Returns:</h5>
                Image.
                <br />




              </dd>




              <dt class="">

                <div class="nameContainer inherited">
                  <div class="anchor" id="getTileCoord">
                  </div>
                  <h4 class="name">
                    getTileCoord<span class="signature">()</span><span class="fa fa-arrow-circle-right"></span><span
                      class="type-signature returnType">{<a
                        href="module-ol_tilecoord.html#~TileCoord">TileCoord</a>}</span>

                    <span class="inherited"><a href="module-ol_Tile-Tile.html#getTileCoord">inherited</a></span>



                  </h4>

                  <div class="tag-source">
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Tile.js">Tile.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Tile.js#L230">line 230</a>
                  </div>

                </div>


              </dt>
              <dd class="">




                <div class="description">
                  <p>获取此瓦片的瓦片坐标。</p>
                </div>











                <dl class="details">





















                </dl>















                <h5>Returns:</h5>
                The tile coordinate.
                <br />




              </dd>




              <dt class="">

                <div class="nameContainer">
                  <div class="anchor" id="load">
                  </div>
                  <h4 class="name">
                    load<span class="signature">()</span>



                  </h4>

                  <div class="tag-source">
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/ImageTile.js">ImageTile.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/ImageTile.js#L144">line 144</a>
                  </div>

                </div>


              </dt>
              <dd class="">




                <div class="description">
                  <p>Load the image or retry if loading previously failed.
                    Loading is taken care of by the tile queue, and calling this method is
                    only needed for preloading or for reloading in case of an error.</p>
                  <p>To retry loading tiles on failed requests, use a custom <code>tileLoadFunction</code>
                    that checks for error status codes and reloads only when the status code is
                    408, 429, 500, 502, 503 and 504, and only when not too many retries have been
                    made already:</p>
                  <pre class="prettyprint source lang-js"><code>const retryCodes = [408, 429, 500, 502, 503, 504];
const retries = {};
source.setTileLoadFunction((tile, src) => {
  const image = tile.getImage();
  fetch(src)
    .then((response) => {
      if (retryCodes.includes(response.status)) {
        retries[src] = (retries[src] || 0) + 1;
        if (retries[src] &lt;= 3) {
          setTimeout(() => tile.load(), retries[src] * 1000);
        }
        return Promise.reject();
      }
      return response.blob();
    })
    .then((blob) => {
      const imageUrl = URL.createObjectURL(blob);
      image.src = imageUrl;
      setTimeout(() => URL.revokeObjectURL(imageUrl), 5000);
    })
    .catch(() => tile.setState(3)); // error
});</code></pre>
                </div>











                <dl class="details">





















                </dl>













              </dd>




              <dt class="">

                <div class="nameContainer inherited">
                  <div class="anchor" id="setState">
                  </div>
                  <h4 class="name">
                    setState<span class="signature">(state)</span>

                    <span class="inherited"><a href="module-ol_Tile-Tile.html#setState">inherited</a></span>



                  </h4>

                  <div class="tag-source">
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Tile.js">Tile.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/Tile.js#L249">line 249</a>
                  </div>

                </div>


              </dt>
              <dd class="">




                <div class="description">
                  <p>设置此瓦片的状态。如果您编写自己的 <a href="module-ol_Tile.html#~LoadFunction"><code>tileLoadFunction</code></a>
                    ,当瓦片无法加载时，正确设置状态为<code>ERROR</code>非常重要。否则，瓦片无法从瓦片队列中移除，并将阻塞其他请求。</p>
                </div>










                <table class="params">
                  <thead>
                    <tr>

                      <th>Name</th>


                      <th>Type</th>

                      <th class="last">Description</th>
                    </tr>
                  </thead>

                  <tbody>


                    <tr class="">

                      <td class="name"><code>state</code></td>



                      <td class="type">


                        <span class="param-type"><a href="module-ol_TileState.html">ol/TileState</a></span>




                      </td>



                      <td class="description last">

                        <p>状态。</p>
                      </td>
                    </tr>


                  </tbody>
                </table>




                <dl class="details">





















                </dl>













              </dd>

            </dl>





          </article>

        </section>




      </div>
    </div>
  </div>
  <script>prettyPrint();</script>
  <script src="scripts/linenumber.js"></script>
  <script src="scripts/main.js"></script>
</body>

</html>